<template>
  <div class="chart-quantity-and-growth">
    <div class="u-head">
      <div class="u-left">{{ quantityLabel }}</div>
      <div class="u-mid"></div>
      <div class="u-right">{{ growthLabel }}</div>
    </div>
    <div class="u-body">
      <Grid :count="data.length" :rowHeight="rowHeight"></Grid>
      <div class="u-body-main">
        <div class="u-left" ref="quantityRef" :style="{ height }"></div>
        <div class="u-mid">
          <div v-for="item in data">
            <el-tooltip effect="light">
              <span style="cursor: pointer">{{ item[periodKey] }}</span>
              <template #content>
                <Tooltip
                  :period="item[periodKey]"
                  :quantityLabel="quantityLabel"
                  :quantityValue="item[quantityKey]"
                  :growthLabel="growthLabel"
                  :growthValue="item[growthKey]"
                ></Tooltip>
              </template>
            </el-tooltip>
          </div>
        </div>
        <div class="u-right" ref="growthRef"></div>
      </div>
    </div>
  </div>
</template>

<script setup name="ChartQuantityAndGrowth">
import { nextTick, onMounted, ref, computed } from 'vue'
import * as echarts from 'echarts'
import Tooltip from './tooltip.vue'
import Grid from './grid.vue'
import { getBar, getLine } from './config'
import useResize from '../useResize'

const props = defineProps({
  // 数据集：[{}]
  data: Array,
  // 时段的字段名year
  periodKey: {
    type: String,
    default: 'period',
  },
  // 数量柱状图的数据的字段名socialStaffNum
  quantityKey: {
    type: String,
    default: 'quantity',
  },
  // 增长率折线图的数据的字段名yoyGrowthRate
  growthKey: {
    type: String,
    default: 'growth',
  },
  // 数量图的名字
  quantityLabel: {
    type: String,
    default: '数量',
  },
  // 增长图的名字
  growthLabel: {
    type: String,
    default: '增长率',
  },
  // 每行高度
  rowHeight: {
    type: Number,
    default: 60,
  },
})

const quantityRef = ref()
const growthRef = ref()
let quantityChart = null
let growthChart = null

useResize(() => {
  quantityChart && quantityChart.resize()
  growthChart && growthChart.resize()
})

// 图表总高度
const height = computed(() => {
  return (props.data?.length ?? 0) * props.rowHeight + 'px'
})

// 时段数据
const periods = computed(() => {
  return props.data?.map((item) => item[props.periodKey])
})

// 柱状图数据
const quantityData = computed(() => {
  return props.data?.map((item) => item[props.quantityKey])
})

// 曲线图数据
const growthData = computed(() => {
  return props?.data?.map((item) => ({
    value: item[props.growthKey],
    label: {
      show: true,
      position: item[props.growthKey] > 0 ? 'right' : 'left',
      color: item[props.growthKey] > 0 ? '#A36DBE' : '#E26E88',
    },
  }))
})

// 渲染
function render() {
  quantityChart = echarts.init(quantityRef.value)
  quantityChart.setOption(getBar(quantityData.value, periods.value))
  growthChart = echarts.init(growthRef.value)
  growthChart.setOption(getLine(growthData.value, periods.value))
}

onMounted(() => {
  // 增加nextTick使echart获得正确的宽度
  nextTick(() => render())
})
</script>

<style lang="stylus" scoped>
.chart-quantity-and-growth
  .u-head,.u-body-main
    display flex
    position relative
    z-index 1
  .u-left,.u-right
    flex 1
  .u-left
    text-align right
  .u-mid
    width 80px
    text-align center
  .u-head
    color #4e5969
    font-size 15px
  .u-body
    position relative
    color #27243f
    font-size 17px
    .u-mid
      line-height 60px
      border-left 1px solid #eff1f5
      border-right 1px solid #eff1f5
</style>
